<template>
	<view>
		<view class="head-box posFixed zIndex999 w100">
			<view class="align-center">
				<view class="head-inp align-center posRelative"
					:style="{width:(isSearch || iscancel ? '600':'700'  )+ 'rpx'}">
					<image class="inp-img" src="../../static/images/fans/search.png" mode=""></image>
					<input confirm-type="search" @confirm="search" v-model="keyword" id="input" class="inp-val gray3"
						type="text" :placeholder="this.$t('shop').搜索手机号昵称" @focus.stop="getfocus" @blur.stop="loseblur"
						@input.stop="winput">
					<view @click.stop="clearkey()" v-if="keyword!=''&& (isSearch || iscancel )"
						class="posAbsort rt0 top0 flex-col align-center justify-center plr10" style="height: 60rpx;">
						<image class="inp-img" src="../../static/images/mine/icon/delete.png" mode=""></image>
					</view>

				</view>
				<view class="ml10 red" v-if="isSearch && keyword!=''" @click="search()"><text>{{$t('common').搜索}}</text>
				</view>
				<view class="ml10" v-if="iscancel && keyword==''"><text>{{$t('common').取消}}</text></view>
			</view>
		</view>

		<mescroll-body top='100' @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:down="downOption">
			<view class="scroll-box">
				<view class="scroll-list align-center" v-for="(m,n) in fsArr" :key="n" @click="fsBtn(m)">
					<image class="scroll-icon"
						:src="m.id==fsId?'../../static/images/mine/icon_yuan_y.png':'../../static/images/mine/icon_yuan_n.png'"
						mode=""></image>
					<image class="scroll-img" :src="m.avatar" mode="aspectFill"></image>
					<view>
						<view class="scroll-text gray3">{{m.nickname}}</view>
						<view class="scroll-text gray3">{{m.phone}}</view>
						<view class="scroll-text gray3">{{$t('shop').本月已结算销售额}}：{{m.new_f_valued}}</view>
					</view>
				</view>
			</view>
		</mescroll-body>

		<view class="bot-box align-center justify-around">
			<view class="bot-btn" @click="back">{{$t('shop').返回}}</view>
			<view class="bot-btn" @click="qdBtn">{{$t('shop').确定}}</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				keyword: '', //搜索关键字
				isSearch: false, //是否搜索
				iscancel: false, //是否取消
				fsArr: '',
				fsId: "",
				fsObj: "",
				downOption: {
					auto: true
				},
				upOption: {
					auto: true
				},

			}
		},

		onLoad() {
			this.$store.dispatch('getuserInfo')
			uni.setNavigationBarTitle({
				title: this.$t('shop').选择直推粉丝
			})
			if(uni.getStorageSync('ztfsObj')){
				this.fsId = uni.getStorageSync('ztfsObj').id
			}
		},
		methods: {
			// 搜索框聚焦时
			getfocus() {
				console.log(this.keyword)
				if (this.keyword != '') {
					console.log(this.keyword != '')
					this.isSearch = true
				} else {
					this.iscancel = true
				}

			},
			// 失去焦点
			loseblur() {
				setTimeout(() => {
					this.isSearch = false
					this.iscancel = false
				}, 100)
			},
			// 键盘输入时
			winput(e) {
				this.keyword = e.detail.value
				if (this.keyword) {
					this.isSearch = true
					this.iscancel = false
				} else {
					this.isSearch = false
					this.iscancel = true
					this.mescroll && this.mescroll.resetUpScroll()
				}

			},
			clearkey() {
				this.isfocus = true
				this.iscancel = true
				this.keyword = ''
				this.mescroll && this.mescroll.resetUpScroll()
			},
			// 搜索商品
			async search() {
				if (!this.keyword) {
					return this.$utils.msg(this.$t('shop').搜索手机号昵称)
				}
				this.mescroll && this.mescroll.resetUpScroll()
			},
			// 下拉刷新
			upCallback(page) {
				if (page.num == 1) this.fsArr = []; //如果是第一页需手动制空列表
				this.$api.getuserlist({
					page: 1,
					limit: 20,
					keyword: this.keyword
				}).then(res => {
					let curPageData = res.data; //当前页的数据列表
					let curPageLen = curPageData?.length; //当前页的数据长度
					let totalPage = res.data.total; //总页数
					let hasNext = 20 === curPageLen ? false : true //根据页数判断是否有下一页
					this.fsArr = this.fsArr.concat(curPageData); //追加新数据
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
			// 列表选择
			fsBtn(val) {
				this.fsId = val.id;
				this.fsObj = val;
				console.log(this.fsId, this.fsObj)
			},

			// 确定
			qdBtn() {
				console.log(this.fsId == '')
				if (this.fsId == '') {
					return uni.showToast({
						title: this.$t('shop').请选择粉丝,
						duration: 2000,
						icon: "none"
					});
				}
				uni.setStorageSync('ztfsObj', this.fsObj);
				uni.navigateBack()
			},
			//返回
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.head-box {
		padding: 14rpx 24rpx;
		background: #ffffff;

		.head-inp {
			width: 100%;
			height: 60rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			background: #F5F5F5;
			border-radius: 100rpx;

			.inp-img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			.inp-val {
				width: 500rpx;
				height: 60rpx;
				font-size: 28rpx;
			}
		}
	}

	.scroll-box {
		padding: 24rpx;
		box-sizing: border-box;

		.scroll-list {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 32rpx;
			margin-bottom: 34rpx;

			.scroll-icon {
				width: 34rpx;
				height: 34rpx;
				margin-right: 20rpx;
			}

			.scroll-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100rpx;
				margin-right: 20rpx;
			}

			.scroll-text {
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.bot-box {
		width: 100vw;
		height: 98rpx;
		background: #ffffff;
		position: fixed;
		left: 0;
		bottom: 0;

		.bot-btn {
			width: 327rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			border-radius: 100rpx;
			border: 2rpx solid #F44A42;
			color: #F44A42;
			font-size: 32rpx;
		}
	}
</style>